<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
import { useDialogStore } from '@/stores/dialog'
import {
  DEFAULT_ECHARTS_FONTSIZE,
  DIALOG_ECHARTS_FONTSIZE,
} from '@/Utils/setting'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const fontSize = dialogInfo.visible
  ? DIALOG_ECHARTS_FONTSIZE
  : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = dialogInfo.visible
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}

// 接收父组件的数据
const props = defineProps<{
  chartData: any
}>()
props.chartData.name = props.chartData.name + Math.random()
var myChart
const itemStyles = ['#4153d3', '#34feaf', '#cc5f30', '#e067e3', '#fadd69']
const series = props.chartData.data.map((item, index) => {
  return {
    type: 'bar',
    name: item.name,
    data: item.data,
    barWidth: dialogInfoVisible ? changePixelSize(25) : changePixelSize(10),
    itemStyle: {
      color: itemStyles[index],
    },
  }
})
// 绘制图表
const drawChart = () => {
  if (myChart != null && myChart != '' && myChart != undefined) {
    myChart.dispose() //解决echarts dom已经加载的报错
  }

  // 绘制新图表
  myChart = echarts.init(document.getElementById(props.chartData.name))
  let option = {
    tooltip: {
      confine: true, // true后,弹出的提示不超出图表
      trigger: props.chartData?.tooltip?.trigger || 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)', //默认值，提示背景颜色，默认为透明度为0.7的黑色
      padding: [
        changePixelSize(10), // 上
        changePixelSize(20), // 右
        changePixelSize(10), // 下
        changePixelSize(20), // 左
      ],

      textStyle: {
        fontSize: changePixelSize(fontSize),
        color: '#fff', //设置文字颜色
      },
      axisPointer: {
        type: 'none',
      },
    },
    legend: {
      top: '2%',
      itemWidth: changePixelSize(7.2),
      itemHeight: changePixelSize(10.5),
      textStyle: {
        fontSize: changePixelSize(fontSize),
        lineHeight: changePixelSize(15),
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '15%',
      bottom: '5%',
      top: '20%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      data: props.chartData?.xAxis?.data || [],
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#fff', // 设置 X 轴标签字体颜色

        interval: 0, // 强制显示所有标签
        fontSize: changePixelSize(fontSize),
        margin: changePixelSize(5), // 调整标签与轴线的距离
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
      },
      splitLine: {
        lineStyle: {
          color: '#03516f', // 分割线颜色为灰色
         
        },
      },
      axisLabel: {
        fontSize: changePixelSize(fontSize),
        color: '#08ffff',
        margin: changePixelSize(5), // 调整标签与轴线的距离
      },
    },
    dataZoom: [
      {
        type: 'inside',
        show: false,
        xAxisIndex: [0],
        zoomOnMouseWheel: false, // 禁止鼠标滚轮缩放
        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
        moveOnMouseMove: true, // 开启鼠标移动窗口平移
        throttle: 100, // 限制滑动的频率，单位为毫秒
        start: 0,
        end:
          props.chartData?.xAxis.data.length > 4
            ? ~~((4 / props.chartData?.xAxis.data.length) * 100)
            : 100,

        showDataShadow: false,

        textStyle: {
          color: '#ccd7d7',
        },
      },
    ],
    series: series,
  }
  myChart.setOption(option)
}
const destroyChart = () => {
  // 销毁图表实例
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
}
onBeforeUnmount(() => {
  // 销毁图表实例
  destroyChart()
})
// 组件挂载后绘制图表
onMounted(() => {
  nextTick(() => {
    drawChart()
  })
})
</script>

<template>
  <div
    :class="{
      'echart-box': true,
      'dialog-box': dialogInfoVisible == true,
    }"
  >
    <div class="chart" :id="chartData.name"></div>
  </div>
</template>

<style lang="scss" scoped>
.echart-box {
  position: relative;
  width: 100%;
  height: 260px;
  .chart {
    width: 100%;
    height: 100%;
  }
}

.dialog-box {
  height: calc(500px - 45px);
}
</style>
